<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            .box{
                width: 100%;
                height: 400px;
            }
            .bg-red{
                background-color: #f00;
            }
            .bg-green{
                background-color: #0f0;
            }
            #overflow-scroll{
                height: 300px;
                width: 100%;
                background-color: rgba(0,0,0,.1);
                overflow:auto;
            }
            #context-example{
                margin-top: 150px;
                height: 400px;
                width: 100%;
                background-color: #ff0;
            }
            #overflow-scroll-h{
                width: 100%;
                height: 300px;
                overflow: auto;
                background-color: #0ff;
            }
            #horizontal-waypoint{
                width: 120%;
                height: 300px;
                background-color: #f0f;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box bg-red">第1盒子</div>
            <div class="box bg-green">
                <h2>第2盒子</h2>
                <div class="counterBox">
                    <span class="counter" id="counter">1,478,865,489</span>
                </div>
            </div>
            <div class="box bg-red">
                <h2>第3盒子-水平滚动盒子</h2>
                <div id="overflow-scroll-h">
                  <div id="horizontal-waypoint">Horizontal</div>
                </div>
            </div>
            <div class="box bg-green">
                <h2>第4盒子-垂直滚动盒子</h2>
                <div id="overflow-scroll">
                    <div id="context-example">scroll垂直滚动盒子</div>
                </div>
            </div>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/jquery.waypoints.min.js"></script>
        <script>
            // var waypoints=$("#counter").waypoint({
            //     handler:function(direction){
            //         alert("到达计数器,方向："+direction);
            //     }
            // });
            var waypoints=$("#counter").waypoint(function(direction){
                alert("到达计数器"+this.element.id+",方向："+direction)
            },{
                // offset:20
                offset:'25%'
            });
            var waypoints=$("#context-example").waypoint(function(direction){
                console.log(this.adapter)
                alert("到达计数器"+this.element.id+",适配器："+!!this.adapter.$element)
            },{
                // offset:20
                context:"#overflow-scroll",
                offset:'25%',
                // offset: 'bottom-in-view'
            });
            var waypoints=$("#horizontal-waypoint").waypoint({
                handler:function(){
                    console.log(this.context)
                    // alert("到达计数器"+this.element.id)
                },
                context:"#overflow-scroll-h",
                horizontal: true,
                // disable:false,
                offset: 'right-in-view'
            });
            // waypoints.disable();
        </script>
    </body>
</html>